---
import BaseHead from "@libs/layouts/BaseHead.astro";

import type { Props as BaseHeadProps } from '@libs/layouts/BaseHead.astro';
import CreateCopyCodeButtons from "../components/CodeButtons/CreateCopyCodeButtons.astro";
// import FadeIn from "../components/FadeIn.astro";
import ThemeProvider from "../components/ThemeToggleButton/ThemeProvider.astro";

export interface Props {
	seo?: BaseHeadProps;
}

const { seo } = Astro.props;
---

<html lang="en">
  <head>
    <BaseHead {...seo} />
    <ThemeProvider/>
    <!-- This is and experimental global fade in animation that is being worked on, enable at your own risk of some jank -->
    <!-- <FadeIn/> -->
    <CreateCopyCodeButtons />
    <script>
      import '../components/CodeButtons/copy-code-button'
    </script>
  </head>
  <body>
    <slot name="header" />
    <main class="flow">
      <slot />
    </main>
    <slot name="footer" />
  </body>
</html>
